<!DOCTYPE html>
<html lang="en">
<head>
    <title>安全验证</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
    <link rel="stylesheet" type="text/css" href="/user/css/verify.css">
    <script>
        (function () {
          if (!window.Promise) {
            document.writeln('<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.min.js"><' + '/' + 'script>');
          }
        })();
    </script>
</head>
<body>
<div class="page">
    <div id="captcha-box"></div>
    <div style="text-align: center; margin-top: 1rem;">使用有问题？ <a id="change-captcha" href="#">切换至其他验证方式</a></div>
</div>
</body>
<script src="/user/js/jquery.min.js"></script>
<script src="/user/js/jsencrypt.min.js"></script>
<script src="/user/js/verify.min.js"></script>
<script>
    var captchaType = '[[${captchaType}]]';
    var redirectUrl = '[[${redirectUrl}]]';

    function changeCaptcha(type) {
        if('blockPuzzle' === type) {
            // 初始化验证码  嵌入式
            $('#captcha-box').slideVerify({
                baseUrl:'[[${baseUrl}]]/user',
                mode:'fixed',
                pubKey: '[[${pubKey}]]',
                imgSize : {       //图片的大小对象
                    width: '100%',
                    height: '200px',
                },
                barSize:{
                    width: '100%',
                    height: '3rem',
                },
                ready : function() {  //加载完毕的回调
                },
                success : function(params) { //成功的回调
                    // 返回的二次验证参数 合并到验证通过之后的逻辑 参数中回传服务器
                    // 在 Android 端，通过 WebViewClient 拦截指定 URL (liusz://captcha?captchaType=blockPuzzle&authenticate=ed9153baba374f81bae9e7146be29465)
                    // 在 iOS 中，通过 WebView 的 WKNavigationDelegate 处理 URL
                    if (redirectUrl) {
                        window.location.href = redirectUrl+'?captchaType='+params.captchaType+'&authenticate='+params.authenticate+'&captchaUid='+params.captchaUid;
                    }
                },
                error : function() {        //失败的回调
                }
            });
        } else if ('clickWord' === type) {
            // 初始化验证码  嵌入式
            $('#captcha-box').pointsVerify({
                baseUrl:'[[${baseUrl}]]/user',
                mode:'fixed',
                pubKey: '[[${pubKey}]]',
                imgSize : {
                    width: '100%',
                    height: '200px',
                },
                ready : function() {
                },
                success : function(params) {
                    //返回的二次验证参数 合并到验证通过之后的逻辑 参数中回传服务器
                    // 在 Android 端，通过 WebViewClient 拦截指定 URL (liusz://captcha?captchaType=blockPuzzle&authenticate=ed9153baba374f81bae9e7146be29465)
                    // 在 iOS 中，通过 WebView 的 WKNavigationDelegate 处理 URL
                    if (redirectUrl) {
                        window.location.href = redirectUrl+'?captchaType='+params.captchaType+'&authenticate='+params.authenticate+'&captchaUid='+params.captchaUid;
                    }
                },
                error : function() {
                }
            });
        } else {

        }
    }

    changeCaptcha(captchaType);

    $('#change-captcha').on('click', function () {
        document.getElementById("captcha-box").innerHTML = "";
        if(captchaType === 'clickWord') {
            captchaType = 'blockPuzzle';
            changeCaptcha('blockPuzzle');
        } else {
            captchaType = 'clickWord';
            changeCaptcha('clickWord');
        }
     });
</script>
</html>